<template>
  <div class="container">
    <div class="service-rank" id="serviceRank"></div>
  </div>
</template>

<script>
  import { getServiceRank } from '@/api/monitor/monitor'
  import echart from 'echarts'
  export default {
    data() {
      return {
        myChart: null,
        timeInterval: null
      }
    },
    mounted() {
      this.myChart = echart.init(document.getElementById('serviceRank'), 'macarons')
      this.myChart.setOption({
        title: {
          text: '热点服务实时排行'
        },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: '访问量',
          type: 'bar',
          data: []
        }]
      }, 'dark')
      const that = this
      that.timeInterval = setInterval(function() {
        getServiceRank().then(response => {
          if (response.data.code === 0) {
            const data = response.data.data
            const xData = []
            const sData = []
            for (const item of data) {
              xData.push(item.name)
              sData.push(item.number)
            }
            that.myChart.setOption({
              xAxis: {
                data: xData
              },
              series: [{
                data: sData
              }]
            })
          }
        })
      }, 1000)
    },
    beforeDestroy() {
      if (this.myChart) {
        this.myChart.dispose()
      }
      const that = this
      clearInterval(that.timeInterval)
    }
  }
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
  .container {
    width:100%;
    height: 100%;
    background-color:#fff;
    .service-rank {
      width: 100%;
      height: 100%;
      padding: 25px;
    }
  }
</style>
